<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>注册 - 社交平台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            --primary: #5b5fff;
            --primary-light: #e0e1ff;
            --primary-dark: #4a4fd8;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --success: #28a745;
            --warning: #ffc107;
        }
    </style>
</head>
<body class="auth-body-bg">
<!-- 浮动背景元素 -->
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>
<div class="floating-bg-element"></div>

<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h2 class="auth-title">用户注册</h2>
        </div>

        <div class="auth-body">
            <c:if test="${not empty error}">
                <div class="auth-alert auth-alert-danger show">
                    <i class="bi bi-exclamation-circle-fill me-2"></i>${error}
                </div>
            </c:if>

            <form id="registerForm" action="${pageContext.request.contextPath}/UserRegisterServlet" method="post" enctype="multipart/form-data">
                <div class="reg-row">
                    <div class="reg-col">
                        <div class="auth-form-group">
                            <label for="userId" class="auth-form-label">用户ID</label>
                            <input type="text" class="auth-form-input" id="userId" name="userId"
                                   pattern="[A-Za-z0-9]+" title="只能包含字母和数字" required>
                            <span class="reg-hint">只能包含字母和数字</span>
                        </div>

                        <div class="auth-form-group">
                            <label for="nickname" class="auth-form-label">昵称</label>
                            <input type="text" class="auth-form-input" id="nickname" name="nickname" required>
                        </div>

                        <div class="auth-form-group">
                            <label for="phone" class="auth-form-label">手机号</label>
                            <input type="tel" class="auth-form-input" id="phone" name="phone" required>
                            <span class="reg-hint">11位数字，不含空格和特殊字符</span>
                        </div>

                        <div class="auth-form-group">
                            <label for="email" class="auth-form-label">电子邮件</label>
                            <input type="email" class="auth-form-input" id="email" name="email" required>
                        </div>
                    </div>

                    <div class="reg-col">
                        <div class="auth-form-group">
                            <label for="avatar" class="auth-form-label">头像</label>
                            <input type="file" class="auth-form-input" id="avatar" name="avatar" accept="image/*">
                            <span class="reg-hint">可选，支持JPG/PNG格式</span>
                        </div>

                        <div class="auth-form-group">
                            <label for="password" class="auth-form-label">密码</label>
                            <input type="password" class="auth-form-input" id="password" name="password" required>
                            <span class="reg-hint">至少8位，包含字母和数字</span>
                        </div>

                        <div class="auth-form-group">
                            <label for="birthDate" class="auth-form-label">出生日期</label>
                            <input type="date" class="auth-form-input" id="birthDate" name="birthDate">
                        </div>

                        <div class="auth-form-group">
                            <label class="auth-form-label">性别</label>
                            <div class="reg-radio-group">
                                <div class="reg-radio-item">
                                    <input type="radio" id="male" name="gender" value="male">
                                    <label for="male">男</label>
                                </div>
                                <div class="reg-radio-item">
                                    <input type="radio" id="female" name="gender" value="female">
                                    <label for="female">女</label>
                                </div>
                                <div class="reg-radio-item">
                                    <input type="radio" id="other" name="gender" value="other" checked>
                                    <label for="other">其他</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="auth-form-group">
                    <button type="submit" class="auth-btn auth-btn-primary">注册</button>
                </div>

                <div class="auth-form-group">
                    <a href="${pageContext.request.contextPath}/views/auth/login.jsp"
                       class="auth-btn auth-btn-outline">已有账号？立即登录</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 处理表单提交后的提示显示
    document.addEventListener('DOMContentLoaded', function() {
        const registerForm = document.getElementById('registerForm');

        if (registerForm) {
            registerForm.addEventListener('submit', function() {
                // 这里可以添加表单验证逻辑
                // 成功或失败提示由后端返回后显示
            });
        }

        // 如果有错误信息，显示提示
        const errorAlert = document.querySelector('.auth-alert-danger');
        if (errorAlert) {
            errorAlert.classList.add('show');
        }
    });
</script>
</body>
</html>